<%@ page language="java" import="java.util.*,java.io.*" pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>${billPrintEntity.title}</title>
    <%@ include file="/common/taglibs.jsp" %>
    <style>
        @media print {
            .noprint {
                display: none;
            }
        }
    </style>
    <script src="${cdnctx}/dep/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#export').click(function () {
                $.ajax({
                    contentType: "application/x-www-form-urlencoded; charset=utf-8",
                    url: "toPrint.shtml",
                    data: {
                        title: $("#title").text().trim(),
                        html: encodeURIComponent("<body>" + $("#content").html() + "</body>")
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.path) {
                            window.location.href = "${cdnctx}" + data.path;
                        }
                    }
                });
            });
            $('#print').click(function () {
                window.print();
            })
        });
    </script>
</head>
<body>
<div id="content">
    <div style='padding:10px 40px 10px 40px'>
        <div id="title" align='center'
             style='height: 80px;font-weight: bold;font-size:22px;'>${billPrintEntity.title}</div>
        <div align='right' style='height: 30px;font-size:16px;'>计费周期：${billPrintEntity.chargeDate}</div>
        <div align='right' style='height: 30px;font-size:16px;'>最后交费日期：${billPrintEntity.lastPayDate}</div>
        <div style='height: 40px;font-size:18px;'>一、当期节电应付费用：</div>
        <div align='center' style='height:100px;padding-left: 50px;padding-right: 50px;'>
            <table border='1' cellspacing='0px' style='width: 100%;'>
                <thead>
                <tr style='height:30px;'>
                    <td align='center'>节省电耗（kw.h）</td>
                    <td align='center'>节省电费（元）</td>
                    <td align='center'>应付比例（%）</td>
                    <td align='center'>应付金额（元）</td>
                </tr>
                </thead>
                <tbody>
                <tr style='height:30px;'>
                    <td align='center'>${billPrintEntity.saveEnergy}</td>
                    <td align='center'>${billPrintEntity.saveElecMoney}</td>
                    <td align='center'>${billPrintEntity.copeProportion}</td>
                    <td align='center'>${billPrintEntity.shouldPayMoney}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div style='font-size:18px;height: 40px;'>二、约定费用：</div>
        <div style='font-size:16px;padding-left:50px;height: 30px;'>${billPrintEntity.maintenancePrice}</div>
        <div style='font-size:16px;padding-left:50px;height: 40px;'>${billPrintEntity.conventionPrice}</div>
        <div style='font-size:18px;height: 40px;'>三、综上所述：</div>
        <div style='font-size:16px;padding-left:50px;'>${billPrintEntity.multipleContext}</div>
    </div>
</div>
<div id="operate" class="noprint" align="center">
    <input id="print" name="print" type="button" value="打&nbsp;印">
    <input id="export" name="export" type="button" value="导&nbsp;出">
</div>
</body>

</html>

